<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security" lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统设置 - 考试座位管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f0f4f8;
        }
        .settings-container {
            max-width: 1000px;
            margin: 30px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        }
        .settings-header {
            border-bottom: 1px solid #e0e0e0;
            margin-bottom: 20px;
            padding-bottom: 15px;
        }
        .settings-section {
            margin-bottom: 30px;
        }
        .settings-section h3 {
            margin-bottom: 15px;
            color: #0d6efd;
        }
        .form-label {
            font-weight: 500;
        }
        .alert {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand" href="/dashboard">考试座位管理系统</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/dashboard">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/admin">座位编排</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/exam">考试信息</a>
                    </li>
                    <li class="nav-item" sec:authorize="hasRole('ADMIN')">
                        <a class="nav-link" href="/admin/users">用户管理</a>
                    </li>
                    <li class="nav-item" sec:authorize="hasRole('ADMIN')">
                        <a class="nav-link active" href="/admin/settings">系统设置</a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
                            <i class="bi bi-person-circle"></i> <span sec:authentication="name">用户名</span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="/users/profile"><i class="bi bi-person"></i> 个人资料</a></li>
                            <li><a class="dropdown-item" href="/users/change-password"><i class="bi bi-key"></i> 修改密码</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="/auth/logout"><i class="bi bi-box-arrow-right"></i> 退出登录</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="settings-container">
        <!-- 消息提示 -->
        <div th:if="${success}" class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="bi bi-check-circle-fill me-2"></i> <span th:text="${success}">操作成功</span>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        <div th:if="${error}" class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-triangle-fill me-2"></i> <span th:text="${error}">操作失败</span>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>

        <!-- 设置标题 -->
        <div class="settings-header">
            <h2><i class="bi bi-gear-fill me-2"></i>系统设置</h2>
            <p class="text-muted">配置考试座位管理系统的全局设置</p>
        </div>

        <!-- 基本设置 -->
        <div class="settings-section">
            <h3><i class="bi bi-sliders me-2"></i>基本设置</h3>
            <form action="/admin/settings/basic" method="post" class="needs-validation" novalidate>
                <div class="mb-3">
                    <label for="systemName" class="form-label">系统名称</label>
                    <input type="text" class="form-control" id="systemName" name="systemName" value="考试座位管理系统" required>
                </div>
                <div class="mb-3">
                    <label for="pageSize" class="form-label">每页显示记录数</label>
                    <select class="form-select" id="pageSize" name="pageSize">
                        <option value="10">10</option>
                        <option value="20" selected>20</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                </div>
                <div class="mb-3">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="enableRegistration" name="enableRegistration" checked>
                        <label class="form-check-label" for="enableRegistration">允许用户注册</label>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">保存基本设置</button>
            </form>
        </div>

        <!-- 考试设置 -->
        <div class="settings-section">
            <h3><i class="bi bi-calendar-check me-2"></i>考试设置</h3>
            <form action="/admin/settings/exam" method="post" class="needs-validation" novalidate>
                <div class="mb-3">
                    <label for="defaultStartTime" class="form-label">默认考试开始时间</label>
                    <input type="time" class="form-control" id="defaultStartTime" name="defaultStartTime" value="08:30" required>
                </div>
                <div class="mb-3">
                    <label for="defaultEndTime" class="form-label">默认考试结束时间</label>
                    <input type="time" class="form-control" id="defaultEndTime" name="defaultEndTime" value="10:30" required>
                </div>
                <div class="mb-3">
                    <label for="defaultExamDuration" class="form-label">默认考试时长（分钟）</label>
                    <input type="number" class="form-control" id="defaultExamDuration" name="defaultExamDuration" value="120" min="30" max="360" required>
                </div>
                <button type="submit" class="btn btn-primary">保存考试设置</button>
            </form>
        </div>

        <!-- 备份与恢复 -->
        <div class="settings-section">
            <h3><i class="bi bi-database me-2"></i>备份与恢复</h3>
            <div class="row mb-3">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">数据备份</h5>
                            <p class="card-text">创建系统数据的完整备份，包括用户、考试和座位信息。</p>
                            <form action="/admin/settings/backup" method="post">
                                <button type="submit" class="btn btn-success"><i class="bi bi-download me-2"></i>创建备份</button>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">数据恢复</h5>
                            <p class="card-text">从之前创建的备份文件恢复系统数据。</p>
                            <form action="/admin/settings/restore" method="post" enctype="multipart/form-data">
                                <div class="mb-3">
                                    <input class="form-control" type="file" id="backupFile" name="backupFile" required>
                                </div>
                                <button type="submit" class="btn btn-warning"><i class="bi bi-upload me-2"></i>恢复数据</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 表单验证
        (function () {
            'use strict'
            var forms = document.querySelectorAll('.needs-validation')
            Array.prototype.slice.call(forms).forEach(function (form) {
                form.addEventListener('submit', function (event) {
                    if (!form.checkValidity()) {
                        event.preventDefault()
                        event.stopPropagation()
                    }
                    form.classList.add('was-validated')
                }, false)
            })
        })()
    </script>
</body>
</html>